
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户注册</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script th:src="@{https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js}"></script>
    <script th:src="@{https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/aes.min.js}"></script>
    <script th:src="@{https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/md5.min.js}"></script>

    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 10px;
        }
        .register-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 25px;
            width: 100%;
            max-width: 400px;
        }
        .register-header {
            text-align: center;
            margin-bottom: 20px;
        }
        .register-header h1 {
            color: #333;
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .register-header p {
            color: #666;
            font-size: 13px;
        }
        .form-group {
            margin-bottom: 15px;
            position: relative;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-size: 13px;
            font-weight: 500;
        }
        .form-control {
            width: 100%;
            height: 100%;
            padding: 3px 4px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 13px;
        }
        .form-control:focus {
            outline: none;
            border-color: #4a90e2;
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
        }
        .password-toggle {
            position: absolute;
            right: 12px;
            top: 33px;
            cursor: pointer;
            color: #999;
            font-size: 14px;
        }
        .btn-register {
            width: 100%;
            padding: 10px;
            background-color: #4a90e2;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            margin-top: 5px;
        }
        .btn-register:hover {
            background-color: #3a7bc8;
        }
        .error-message {
            margin: 10px 0;
            padding: 8px;
            background-color: #ffebee;
            color: #d32f2f;
            border-radius: 4px;
            text-align: center;
            font-size: 13px;
            display: none;
        }
        .error-message.show {
            display: block;
        }
        .success-message {
            margin: 10px 0;
            padding: 8px;
            background-color: #e8f5e9;
            color: #2e7d32;
            border-radius: 4px;
            text-align: center;
            font-size: 13px;
            display: none;
        }
        .success-message.show {
            display: block;
        }
        .footer-links {
            margin-top: 15px;
            text-align: center;
            font-size: 12px;
        }
        .footer-links a {
            color: #4a90e2;
            text-decoration: none;
        }
        .footer-links a:hover {
            text-decoration: underline;
        }
        #username-availability {
            font-size: 12px;
            margin-top: 3px;
        }
    </style>
</head>
<body>
<div class="register-container">
    <div class="register-header">
        <h1>创建新账户</h1>
        <p>填写以下信息完成注册</p>
    </div>

    <form th:id="registerForm" th:action="@{/register}"  method="post">
        <div class="form-group">
            <label for="username">用户名 <span class="required">*</span></label>
            <input type="text" id="username" th:field="*{user.username}" class="form-control"
                   placeholder="4-20位字母、数字或下划线" required
                   pattern="[a-zA-Z0-9_]{4,20}" title="4-20位字母、数字或下划线">
            <small class="form-text text-muted" id="username-availability"></small>
        </div>

        <div class="form-group">
            <label for="password">密码 <span class="required">*</span></label>
            <input type="password" id="password" class="form-control"
                   placeholder="8-20位字符，包含大小写字母和数字" required
                   pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,20}$"
                   title="8-20位字符，必须包含大小写字母和数字">
            <i class="fas fa-eye password-toggle" id="togglePassword"></i>
        </div>

        <div class="form-group">
            <label for="confirmPassword">确认密码 <span class="required">*</span></label>
            <input type="password" id="confirmPassword" class="form-control"
                   placeholder="再次输入密码" required>
        </div>

        <div class="form-group">
            <label for="email">电子邮箱</label>
            <input type="email" id="email" th:field="*{user.email}" class="form-control"
                   placeholder="example@domain.com">
        </div>

        <div class="form-group">
            <label for="phone">手机号码</label>
            <input type="tel" id="phone" th:field="*{user.phone}" class="form-control"
                   placeholder="11位手机号码" pattern="[0-9]{11}">
        </div>

        <div class="form-group">
            <label for="age">年龄</label>
            <input type="tel" id="age"  th:field="*{userdl.age}" class="form-control"
                   placeholder="请输入年龄">
        </div>

        <div class="form-group">
            <label for="gender">性别</label>
            <input type="tel" id="gender"  th:field="*{userdl.gender}" class="form-control"
                   placeholder="请输入性别 （0-位置， 1-男， 2-女）" pattern="[0-2]{1}">
        </div>

        <input type="hidden" id="encryptedPassword" th:field="*{user.password}" name="encryptedPassword">
        <input type="hidden" id="salt" name="salt">

        <button type="submit" class="btn-register" id="registerBtn">注 册</button>
    </form>






    <div class="footer-links">
        已有账号? <a th:href="@{/login}">立即登录</a>
    </div>
</div>

<script>
    // 密码显示/隐藏切换
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('password');
        const icon = this;
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    });

    // 用户名可用性检查
    document.getElementById('username').addEventListener('blur', function() {
        const username = this.value;
        const availabilityMsg = document.getElementById('username-availability');

        if (username.length < 4 || username.length > 20) {
            availabilityMsg.textContent = '用户名长度应为4-20位';
            availabilityMsg.style.color = '#d32f2f';
            return;
        }

        if (!/^[a-zA-Z0-9_]+$/.test(username)) {
            availabilityMsg.textContent = '只能包含字母、数字和下划线';
            availabilityMsg.style.color = '#d32f2f';
            return;
        }

        // 模拟AJAX检查
        setTimeout(() => {
            const takenUsernames = ['admin', 'test', 'user123'];
            if (takenUsernames.includes(username)) {
                availabilityMsg.textContent = '用户名已被使用';
                availabilityMsg.style.color = '#d32f2f';
            } else {
                availabilityMsg.textContent = '用户名可用';
                availabilityMsg.style.color = '#2e7d32';
            }
        }, 300);
    });

    // 表单提交处理
    document.getElementById('registerForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        if (password !== confirmPassword) {
            alert('两次输入的密码不一致！');
            return;
        }

        const salt = CryptoJS.lib.WordArray.random(16).toString();
        document.getElementById('salt').value = salt;

        const secretKey = "1234567890123456";
        const encryptedPassword = CryptoJS.AES.encrypt(
            CryptoJS.enc.Utf8.parse(password),
            CryptoJS.enc.Utf8.parse(secretKey),
            { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
        ).toString();

        document.getElementById('encryptedPassword').value = encryptedPassword;
        this.submit();
    });
</script>
</body>
</html>